<template>
  <div class="table_layout ">
    <div class="table_title" flex="main:justify cross:center">
      <div flex>
        <p>创建人：{{ tableData.creator || '--' }}</p>
        <p style="margin-left:20px">创建时间：{{ tableData.createTime || '--' }}</p>
      </div>
      <div>
        <template v-if="!patternIsEdit">
          <el-button class="margin_left_10" type="primary" plain size="mini" @click="showShare = true">分享</el-button>
          <el-button class="margin_left_10" size="mini">打印</el-button>
          <!-- <el-button class="margin_left_10" v-if="$store.state.archives.flag !== 2" size="mini" type="warning" plain @click="patternIsEdit = true">编辑</el-button> -->
        </template>
        <template v-else>
          <el-button class="margin_left_10" size="mini" plain type="success" :loading="loading" @click="handleSave">保存</el-button>
          <el-button class="margin_left_10" size="mini" plain type="danger" @click="handleGetData">取消</el-button>
        </template>
      </div>
    </div>
    <div class="table_containter">
      <div class="container_title">
        <p>{{ $store.state.user.departmentName }}</p>
        <h1>{{ tableData.title }}检测报告</h1>
      </div>
      <div style="background: #F4F4F4;">
        <img height="456px" width="785px" :src="tableData.planPic" alt="" srcset="">
      </div>
      <el-divider />

      <div v-if="tableData.detailJson">
        碳化深度测定仪
        <p class="font_size_14 color_999">仪器编号：{{ tableData.detailJson.deviceNum }}</p>
      </div>
      <div v-if="tableData.detailJson" class="margin_top_20">
        检查数据
        <p v-for="(item,index) in tableData.detailJson.pointData" :key="'a'+index" class="font_size_14 color_999">第{{ item.pointName }}点：数据为{{ item.pointNum }}</p>
        <!-- <p class="font_size_14 color_999">B点：位置上下左右分别为 2.3m、3.4m、3.2m、1.4m，参数为12（标准值为1-10）</p> -->
      </div>

      <el-divider />

      <div class="margin_top_20">
        检查数据
        <p class="font_size_14 color_999">根据以上结果大概率说明火灾蔓延趋势是右下至上45度蔓延；</p>
      </div>

    </div>
    <!-- <transition name="el-zoom-in-center">
      <div v-show="patternIsEdit" class="table_shade" />
    </transition> -->
    <shareComponent v-model="showShare" />
  </div>

</template>

<script>
// import { parseTime } from '@/utils/time'
// import { requestSave, requestGetById } from '@/api/home'
import shareComponent from './share'
export default {
  components: { shareComponent },
  data() {
    return {
      showShare: false,
      patternIsEdit: false,
      loading: false,
      url: '/plans',
      tableData: {}
    }
  },
  created() {
    this.handleGetData()
  },
  methods: {
    handleSave() {
      const formData = JSON.parse(JSON.stringify(this.tableData))
      formData.archivesId = this.$route.query.archivesId
      formData.alarmTime = `${formData.alarmTimeDate} ${formData.alarmTimeTime}:00`
      formData.title = '火灾调查登记表' + formData.name
      requestSave(formData, this.url).then(res => {
        this.$message.success('操作成功')
        this.$router.replace({ path: this.$route.path, query: { itemId: res.data, ...this.$route.query, isEdit: false }})
        this.handleGetData()
      })
    },
    handleGetData(come) {
      const itemId = this.$route.query.itemId
      this.patternIsEdit = come ? false : JSON.parse(this.$route.query.isEdit || 'false')
      if (!itemId) return
      requestGetById({ id: itemId }, this.url).then(res => {
        const formData = res.data
        formData.detailJson = JSON.parse(formData.detail)[0]
        this.tableData = formData
      })
    }

  }
}
</script>

